<template>
	<view class="root bgc-fff f1 br-30" :style="{ margin: `50rpx 30rpx` }">
		<label class="title color-e15a52 fs-36 jc-center lh-4 fw-600">扫码支付</label>
		<view class="ai-center jc-center f1">
			<image
				class="as-center"
				:style="{ width: `80%` }"
				:src="src"
				@load="loaded"
				@error="loaded"
				mode="widthFix"
			/>
			<button
				hover-class="tap-hover"
				:style="{
					backgroundImage: `linear-gradient(to right, #fd4b3d, #ff7b6f)`,
					margin: `80rpx 0`,
					width: `80%`,
				}"
				class="br-10 fs-34 color-fff"
				@click="saveImageToPhotosAlbum"
			>
				保存到相册
			</button>
		</view>
	</view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";

	@Component
	export default class CollectionCode extends Vue {
		// component property
		src: string = "";
		onLoad() {
			uni.showLoading({ title: "Loading..." });
			this.$request.get("/index/qrCode").then(({ data }) => {
				this.src = data;
			});
		}
		loaded() {
			uni.hideLoading();
		}
		async saveImageToPhotosAlbum() {
			uni.showToast({ title: "Downloading...", icon: "loading" });
			const [downloadFail, downloadRes]: any = await uni.downloadFile({ url: this.src });
			if (downloadFail) {
				uni.showToast({ title: `图片下载失败.\n${downloadFail.errMsg}`, icon: "none" });
				return;
			}

			uni.showToast({ title: "Saving...", icon: "loading" });
			const [saveFail]: any = await uni.saveImageToPhotosAlbum({
				filePath: downloadRes.tempFilePath,
			});
			if (saveFail) {
				uni.showToast({ title: `图片保存失败.\n${saveFail.errMsg}`, icon: "none" });
				return;
			}
			uni.showToast({ title: "已保存至系统相册" });
		}
	}
</script>
<style>
	page {
		background-color: #fd5043;
	}
</style>
<style lang="scss" scoped>
	// scss

	.title {
		position: relative;
		border-bottom: 1rpx dashed #e5e5e5;
		&::before,
		&::after {
			content: "";
			position: absolute;
			bottom: 0;
			width: 36rpx;
			height: 36rpx;
			background-color: #fd5043;
			border-radius: 50%;
		}

		&::before {
			left: 0;
			transform: translate(-50%, 50%);
		}
		&::after {
			right: 0;
			transform: translate(50%, 50%);
		}
	}
</style>